function Draw (el, options) {
  let canvas = document.getElementById(el)
  let canvasWidth = document.body.clientWidth
  let canvasHeight = document.body.clientHeight
  let hastouch = 'ontouchstart' in window
  let tapstart = hastouch ? 'touchstart' : 'mousedown'
  let tapmove = hastouch ? 'touchmove' : 'mousemove'
  let tapend = hastouch ? 'touchend' : 'mouseup'
  let ctx = canvas.getContext('2d')
  let lastPos = { x: 0, y: 0 }
  let isDraw = false
  let isWrite = false
  let defaultOptions = {
    fillStyle: '#333',
    lineWidth: 5,
    finishedEl: null,
    clearEl: null,
    success: function (img) {
    }
  }
  defaultOptions = Object.assign(defaultOptions, options)
  canvas.width = canvasWidth
  canvas.height = canvasHeight

  canvas.addEventListener(tapstart, function (e) {
    e.preventDefault()
    isDraw = true
    lastPos = getPos(e)
    document.getElementById('tooltip').style.display = 'none'
  })

  canvas.addEventListener(tapmove, function (e) {
    e.preventDefault()
    if (isDraw) {
      drawing(e)
    }
  })

  canvas.addEventListener(tapend, function (e) {
    e.preventDefault()
    isDraw = false
  })

  if (defaultOptions.finishedEl) {
    document.getElementById('finished').addEventListener('click', function () {
      if (isWrite) {
        let img = new Image()
        img.src = canvas.toDataURL()
        img.onload = function () {
          /* ctx.save()// 保存状态
          ctx.translate(200, 200)// 设置画布上的(0,0)位置，也就是旋转的中心点
          ctx.rotate(-Math.PI / 2)
          ctx.drawImage(img, -img.width / 2, -img.height / 2)// 把图片绘制在旋转的中心点， */
          ctx.restore()// 恢复状态
        }
        defaultOptions.success(canvas.toDataURL())
      } else {
        defaultOptions.success(false)
      }
    })
  }

  if (defaultOptions.clearEl) {
    document.getElementById('clearCanvas').addEventListener('click', function () {
      ctx.clearRect(0, 0, canvasWidth, canvasHeight)
      document.getElementById('tooltip').style.display = 'block'
      isWrite = false
    })
  }

  function getPos (e) {
    let box = canvas.getBoundingClientRect()
    e = hastouch ? e.touches[0] : e

    return {
      x: e.clientX - box.left,
      y: e.clientY - box.top
    }
  }

  function drawing (e) {
    let curPos = getPos(e)
    ctx.strokeStyle = defaultOptions.fillStyle
    ctx.lineWidth = defaultOptions.lineWidth
    ctx.lineCap = 'round'
    ctx.lineJoin = 'round'
    ctx.save()
    ctx.beginPath()
    ctx.moveTo(lastPos.x, lastPos.y)
    ctx.lineTo(curPos.x, curPos.y)
    ctx.stroke()
    ctx.restore()
    lastPos = curPos
    isWrite = true
  }
}
